<template>
  <div>
    <span ref="hhh">{{ text2 }}</span
    ><button @click="fun2()">$ref</button>
    <hr />
    事件对象：<button @click="fun1($event)">点我触发事件 对象打印</button>
    <hr />
    <span>{{ text | xiao1 }}</span>
    <hr />
    <span>{{ text1 }}</span
    ><span v-xiao2>{{ text1 }}</span>
    <hr />
    <button @click="fun()">返回</button>
    <hr />
    <span ref="kkk">---------{{ text3 }}</span>
    <hr />

  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "哇哈哈哈哈",
      text1: "自定义指令",
      text2: "我是$ref",
      obj: {
        name: "zz",
      },
      en: "",
      text3: "使用$nexttick",
    };
  },
  methods: {
    fun() {
      this.$router.go("-1");
    },
    fun1(a) {
      console.log(a);
    },
    fun2() {
      this.$refs.hhh.style.color = "white";
    },
    fun3() {
      this.obj.age = 18;
    },
    fun4() {
      this.$set(this.obj, "age", 18);
    },
  },

  created() {
    this.$nextTick(() => {
      console.log(this.$refs.kkk.innerText);
      alert("这是在created的时候使用了$nextTick");
    });
  },
  filters: {
    xiao1(val) {
      if (val.length > 5) {
        return val.substr(0, 5) + "...";
      } else {
        return val;
      }
    },
  },
  directives: {
    xiao2: {
      inserted(el) {
        el.style.color = "blue";
      },
    },
    xiaoming: {
      inserted(el) {
        el.style.color = "red";
      },
    },
    xiaoming1: {
      inserted(el) {
        el.focus();
      },
    },
  },
  beforeRouteLeave(to, from, next) {
    console.log(to);
    console.log(from);
    if (confirm("离开？")) {
      next();
    } else {
      next(false);
    }
  },
};
</script>

<style scoped>
hr {
  margin: 0.625rem 0;
  color: white;
}
</style>